<script lang="ts" setup>
import {type Ref, ref, onMounted} from "vue";
import ShopBottom from "@/componets/bottom/shopBottom.vue";
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {getPackageDe, type PackageVo} from "@/api/package/package";
import {baseUrl} from "@/api/http"
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
const goBack = () => {
  uni.navigateBack();
};

const packageVo: Ref<PackageVo> = ref({
  id: 0,
  typeId: 0,
  typeName: "",
  name:'',
  price: 0.0,
  label: ['',''],
  file: [],
  service: null,
  goods: null,
  trip: null,
  description: null
})

const init = async () => {
  const id = await uni.getStorage({
    key:"packageId"
  })
  getPackageDe(id.data + "" ).then(res => {
    packageVo.value = res.data.data.data
    packageVo.value.label = res.data.data.data.label.split(",")
    imgList.value = res.data.data.data.file
  })
}

const imgList:Ref<File[]> = ref([])

init()

const pre = (url:string) => {
	uni.previewImage({
		urls: [url]
	})
}

// 分享给朋友
  onShareAppMessage(() => ({
    title: '如初国风馆',
    path: '/pages/index/index', // 替换为你的页面路径
    imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  // 分享到朋友圈
  onShareTimeline(() => ({
  	  title: '如初国风馆',
  	  path: '/pages/index/index', // 替换为你的页面路径
  	  imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))

</script>

<template>
  <view class="page">
    <!-- 头部导航 -->
    <view class="nav-header">
      <uni-icons
        class="back-icon cursor-pointer"
        type="back"
        size="24"
        @click="goBack"
      />
      <text class="title">套餐详情</text>
    </view>
    <!-- 主图区域 -->
    <swiper class="main-image" circular autoplay interval="3000" duration="500">
      <swiper-item v-for="i in imgList">
        <image
          class="swiper-image"
          :src="baseUrl + i.clientUrl"
		  @click="pre(baseUrl + i.clientUrl)"
          mode="aspectFill"
        />
      </swiper-item>
    </swiper>
    <!-- 商品信息 -->
    <view class="product-info">
      <text class="product-title">{{packageVo.name}}</text>
      <view class="price-container">
        <text class="current-price">{{packageVo.price}}</text>
        <text class="original-price">{{packageVo.price + 100}}</text>
      </view>
      <text class="tag" v-for="i in packageVo.label">{{i}}</text>
    </view>
    <!-- 服务信息 -->
    <view class="service-info">
      <view class="info-item">
        <text class="item-title">服务</text>
        <view class="item-content">
          <text class="text">{{packageVo.service}}</text>
        </view>
      </view>
      <view class="info-item">
        <text class="item-title">行程安排</text>
        <text class="item-content">{{packageVo.trip}}</text>
      </view>
      <view class="info-item">
        <text class="item-title">产品</text>
        <text class="item-content">{{packageVo.goods}}</text>
      </view>
      <view class="info-item">
        <text class="item-title">套餐简介</text>
        <text class="item-content"
          >{{packageVo.description}}</text
        >
      </view>
    </view>
    <!-- 底部按钮 -->
	<shopBottom></shopBottom>
  </view>
</template>



<style scoped lang="scss">
page {
  height: 100%;
}
.page {
  padding-top: 90rpx;
  min-height: 100%;
  background-color: #f8f8f8;
}
.nav-header {
  position: fixed;
  top: 0rpx;
  left: 0;
  right: 0;
  height: 88rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  padding-top: 90rpx;
  z-index: 100;
  border-bottom: 1px solid #f0f0f0;
}
.back-icon {
  flex-shrink: 0;
}
.title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}
.right-icons {
  display: flex;
  gap: 30rpx;
}
.main-image {
  width: 750rpx;
  height: 800rpx;
  margin-top: 88rpx;
}
.swiper-image {
  width: 750rpx;
  height: 800rpx;
}
.product-info {
  padding: 30rpx;
  background-color: #ffffff;
}
.product-title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 20rpx;
  display: block;
}
.price-container {
  margin-bottom: 20rpx;
}
.current-price {
  font-size: 24px;
  color: #ff4d4f;
  font-weight: 600;
  margin-right: 20rpx;
}
.original-price {
  font-size: 14px;
  color: #999999;
  text-decoration: line-through;
}
.tag {
  display: inline-block;
  padding: 4rpx 16rpx;
  background-color: #f5f5f5;
  color: #666666;
  font-size: 12px;
  border-radius: 4px;
}
.service-info {
  margin-top: 20rpx;
  background-color: #ffffff;
  padding: 30rpx;
  padding-bottom: 200rpx;
}
.info-item {
  margin-bottom: 40rpx;
}
.info-item:last-child {
  margin-bottom: 0;
}
.item-title {
  font-size: 16px;
  color: #333333;
  font-weight: 500;
  margin-bottom: 16rpx;
  display: block;
}
.item-content {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
}
.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
}
.cursor-pointer {
  cursor: pointer;
}
</style>
